<template>
  <div class="container">
    
        <div class="box">
          <div class="childbox" v-for="item in Goodslist" :key="item.id" @click="todetails(item.id)">
            <div class="img"><img :src="item.img_url" alt="" /></div>
            <div class="text">{{ item.title }}</div>
            <div class="content">
              <div class="last_a">
                <span>￥{{ item.sell_price }}</span
                ><del>￥{{ item.market_price }}</del>
              </div>
              <div class="last_b">
                <span>热卖中</span><span>剩余{{ item.stock_quantity }}件</span>
              </div>
            </div>
          </div>
        </div>
     
  </div>
</template>

<script>
export default {
  data() {
    return {
      Goodslist: []
    };
  },
  created() {
    this.getGoodslist();
  },
  methods: {
    async getGoodslist() {
      const res = await this.$http.get("/api/getgoods?pageindex=1");
      this.Goodslist = res.data.message;
    },
    todetails(id){
        this.$router.push({path:'/details',query:{id:id}})
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 5px 10px;
  margin-top: 5px;
  margin-bottom: 60px;
}
.childbox {
  width: 48%;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 0;
}
.img {
  overflow: hidden;
  img {
    width: 100%;
    min-height: 180px;
  }
}
.content {
  background-color: #ddd;
  overflow: hidden;
  padding: 10px;
  span {
    float: left;
    margin-right: 22px;
  }
}
.text {
  font-size: 14px;
  color: #000;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 2;
  padding: 4px 10px;
  height: 45px;
}
.last_b {
  display: flex;
  justify-content: space-between;
}
.last_a {
  text-align: left;
  span {
    font-size: 16px;
    color: red;
  }
}

</style>
